<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Dashboard by Bootstrapious.com</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <!-- Choices CSS-->
    <link rel="stylesheet" href="../vendor/choices.js/public/assets/styles/choices.min.css">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" href="../vendor/overlayscrollbars/css/OverlayScrollbars.min.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="../css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="../css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="../img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
  <!--    页内导航-->
  <div class="bg-gray-200 text-sm">
    <div class="container-fluid">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0 py-3">
          <li class="breadcrumb-item"><a class="fw-light" href="admin/index.html">Home</a></li>
          <li class="breadcrumb-item active fw-light" aria-current="page">主编推荐  </li>
        </ol>
      </nav>
    </div>
  </div>
  <!--页内导航 end-->
  <!-- 页面主要内容 -->
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <div class="card">
          <div class="card-header">
            <h3 class="h4 mb-0">主编推荐</h3>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table text-sm mb-0 table-striped table-hover">
                <thead>
                  <tr class="align-middle text-center">
                    <th>#</th>
                    <th>图片</th>
                    <th>图书名称</th>
                    <th>order</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="align-middle text-center">
                    <th>1</th>
                    <td>
                      <img src="../img/book/20004737-1_w.jpg" width="140px" height="160px" alt="">
                    </td>
                    <td>Java核心技术第十版第Ⅰ卷</td>
                    <td>1</td>
                    <td>
                      <button type="button" class="btn btn-outline-danger">删除</button>
                      <button type="button" class="btn btn-outline-success">编辑</button>
                    </td>
                  </tr>
                  <tr class="align-middle text-center">
                    <th scope="row">2</th>
                    <td>
                      <img src="../img/book/20004737-1_w.jpg" width="140px" height="160px" alt="">
                    </td>
                    <td>Java核心技术第十版第Ⅰ卷</td>
                    <td>2</td>
                    <td>
                      <button type="button" class="btn btn-outline-danger">删除</button>
                      <button type="button" class="btn btn-outline-success">编辑</button>
                    </td>
                  </tr>
                  <tr class="align-middle text-center">
                    <th scope="row">3</th>
                    <td>
                      <img src="../img/book/20004737-1_w.jpg" width="140px" height="160px" alt="">
                    </td>
                    <td>Java核心技术第十版第Ⅰ卷</td>
                    <td>3</td>
                    <td>
                      <button type="button" class="btn btn-outline-danger">删除</button>
                      <button type="button" class="btn btn-outline-success">编辑</button>
                    </td>
                  </tr>
                  <tr class="align-middle text-center">
                    <th scope="row">4</th>
                    <td>
                      <img src="../img/book/20004737-1_w.jpg" width="140px" height="160px" alt="">
                    </td>
                    <td>Java核心技术第十版第Ⅰ卷</td>
                    <td>4</td>
                    <td>
                      <button type="button" class="btn btn-outline-danger">删除</button>
                      <button type="button" class="btn btn-outline-success">编辑</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div> 
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col  px-5">
        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#recommendBook">新增图书列表</button>
      </div>
    </div>
  </div>
  
  <!-- 页面主要内容 end -->
  <!--  新增banner模态框-->
<div class="modal fade" id="recommendBook" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">图书查询</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <div class="input-group">
              <select class="form-select" id="inputGroupSelect04" >
                <option selected>一周</option>
                <option selected>一月</option>
                <option >图书名称</option>
                <option value="1">ISBN</option>
                <option value="2">出版社</option>
                <option value="3">作者</option>
              </select>
              <input type="text" class="form-control w-50">
              <button class="btn btn-danger " type="button">查询</button>
            </div>
          </div>
          <div class="mb-3">
            <!-- 一条查询消息-->
            <div class="card mb-3" >
              <div class="row">
                <div class="col-auto text-center">
                  <img src="../img/book/20004737-1_w.jpg" width="100px" height="100px" alt="...">
                </div>
                <div class="col-6 px-0">
                  <div class="card-body p-0">
                    <h5 class="card-title">Java核心技术第十版第Ⅰ卷 <small class="text-muted">9876123412345</small></h5>
                    <span class="card-text">张三</span> <br>
                    <span class="card-text">清华大学出版社</span> <br>
                    <span class="card-text"><small class="text-muted">2021-12-22</small> </span>
                  </div>
                </div>
                <div class="col-2 d-flex align-items-center">
                  <input type="number" class="form-control"  value="1" max="4" min="1">
                </div>
                <div class="col-2 d-flex align-items-center">
                  <button type="button" class="btn btn-outline-success">设置</button>
                </div>
              </div>
            </div>
            <!-- 一条查询消息 end-->
            <!-- 一条查询消息-->
            <div class="card mb-3" >
              <div class="row">
                <div class="col-auto text-center">
                  <img src="../img/book/20004737-1_w.jpg" width="100px" height="100px" alt="...">
                </div>
                <div class="col-6 px-0">
                  <div class="card-body p-0">
                    <h5 class="card-title">Java核心技术第十版第Ⅰ卷 <small class="text-muted">9876123412345</small></h5>
                    <span class="card-text">张三</span> <br>
                    <span class="card-text">清华大学出版社</span> <br>
                    <span class="card-text"><small class="text-muted">2021-12-22</small> </span>
                  </div>
                </div>
                <div class="col-2 d-flex align-items-center">
                  <input type="number" class="form-control"  value="1" max="4" min="1">
                </div>
                <div class="col-2 d-flex align-items-center">
                  <button type="button" class="btn btn-outline-success">设置</button>
                </div>
              </div>
            </div>
            <!-- 一条查询消息 end-->
            <!-- 一条查询消息-->
            <div class="card mb-3" >
              <div class="row">
                <div class="col-auto text-center">
                  <img src="../img/book/20004737-1_w.jpg" width="100px" height="100px" alt="...">
                </div>
                <div class="col-6 px-0">
                  <div class="card-body p-0">
                    <h5 class="card-title">Java核心技术第十版第Ⅰ卷 <small class="text-muted">9876123412345</small></h5>
                    <span class="card-text">张三</span> <br>
                    <span class="card-text">清华大学出版社</span> <br>
                    <span class="card-text"><small class="text-muted">2021-12-22</small> </span>
                  </div>
                </div>
                <div class="col-2 d-flex align-items-center">
                  <input type="number" class="form-control"  value="1" max="4" min="1">
                </div>
                <div class="col-2 d-flex align-items-center">
                  <button type="button" class="btn btn-outline-success">设置</button>
                </div>
              </div>
            </div>
            <!-- 一条查询消息 end-->
            <!-- 一条查询消息-->
            <div class="card mb-3" >
              <div class="row">
                <div class="col-auto text-center">
                  <img src="../img/book/20004737-1_w.jpg" width="100px" height="100px" alt="...">
                </div>
                <div class="col-6 px-0">
                  <div class="card-body p-0">
                    <h5 class="card-title">Java核心技术第十版第Ⅰ卷 <small class="text-muted">9876123412345</small></h5>
                    <span class="card-text">张三</span> <br>
                    <span class="card-text">清华大学出版社</span> <br>
                    <span class="card-text"><small class="text-muted">2021-12-22</small> </span>
                  </div>
                </div>
                <div class="col-2 d-flex align-items-center">
                  <input type="number" class="form-control"  value="1" max="4" min="1">
                </div>
                <div class="col-2 d-flex align-items-center">
                  <button type="button" class="btn btn-outline-success">设置</button>
                </div>
              </div>
            </div>
            <!-- 一条查询消息 end-->
          </div>
          <div class="mb-3 d-flex justify-content-center">
            <nav aria-label="Page navigation example">
              <ul class="pagination">
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </ul>
            </nav>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- 新增banner模态框 end-->



    <!-- JavaScript files-->
    <script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../vendor/just-validate/js/just-validate.min.js"></script>
    <script src="../vendor/overlayscrollbars/js/OverlayScrollbars.min.js"></script>
    <!-- Main File-->
    <script src="../js/front.js"></script>
    <script>
      // ------------------------------------------------------- //
      //   Inject SVG Sprite - 
      //   see more here 
      //   https://css-tricks.com/ajaxing-svg-sprite/
      // ------------------------------------------------------ //
      function injectSvgSprite(path) {
      
          var ajax = new XMLHttpRequest();
          ajax.open("GET", path, true);
          ajax.send();
          ajax.onload = function(e) {
          var div = document.createElement("div");
          div.className = 'd-none';
          div.innerHTML = ajax.responseText;
          document.body.insertBefore(div, document.body.childNodes[0]);
          }
      }
      // this is set to BootstrapTemple website as you cannot 
      // inject local SVG sprite (using only 'icons/orion-svg-sprite.svg' path)
      // while using file:// protocol
      // pls don't forget to change to your domain :)
      injectSvgSprite('https://bootstraptemple.com/files/icons/orion-svg-sprite.svg'); 
      
      
    </script>
    <!-- FontAwesome CSS - loading as last, so it doesn't block rendering-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  </body>
</html>